<template>
      <div class="coll-box">
            <div class="collect-info" v-if="collSee">
                  <el-empty :image-size="50" style="height:480px" v-if="emptyState" description="暂无收藏作品,快去收藏吧!!!"></el-empty>
                  <div class="content" v-for="(item,index) in collectList" :key="index">
                        <el-alert
                              title=""
                              type="success"
                              effect="dark"
                              :closable="false">
                              {{index+1}}&emsp;|&emsp;{{item.mivieName}}&emsp;|&emsp;{{item.movieMainPerformer}}
                              &emsp;|&emsp;{{item.movieType}}&emsp;|&emsp;{{item.collectTime}}
                        </el-alert>
                        <el-button class="btn-del" type="danger" size="mini" @click="deleteCollect(item)">删除收藏</el-button>
                  </div>
                  <div class="pageinfo">
                        <el-pagination
                              background
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                              :current-page="currentPage"
                              :page-size="pageSize"
                              layout="total, prev, pager, next, jumper"
                              :total="totals">
                        </el-pagination>
                  </div>
            </div>
      </div>
</template>

<script>
import { isLogin,notLoginTip } from '@/utils/auth.js';
import { collectList } from '@/components/test/Test';
export default {
      data(){
            return{
                  collSee:false,
                  emptyState:true,
                  collectList:[],
                  currentPage:1,
                  totals:40,
                  pageSize:8
            }
      },
      created(){
            // 登录
            if(isLogin()){
                  this.collSee = true;
                  this.emptyState=false;
                  this.collectList=collectList;
                  console.log(this.collectList);
            }else{
                  this.$message.error(notLoginTip(1));
            }
      },
      methods:{
            deleteCollect(val){
                  this.$message.success("delete success");
            },
            handleSizeChange(val) {
                  console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                  console.log(`当前页: ${val}`);
            }
      }
}
</script>

<style scoped>
@import url('../../assets/css/mycollection.css');
</style>